這是一個在 Vue 3 被拿掉的功能，但還是來了解一下。

filter 用途及用法

filter 是讓雙花括號({{}})或 v-bind 表達式中的值通過 | 再來讓 filter 作用，寫法如下：

<!-- 在 Mustache 中 -->
{{ message | filterName }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="searchText | filterName"></div>

message 或 searchText 都會被 | 後的 filter 作用。

// 全域
//value指的是雙花括號(`{{}}`)或 `v-bind` 表達式中的值
Vue.filter('filterName',value=>{
  //...
})

//區域
new Vue({
  filters:{
    filterName(value){
      //...
    }
  }
})

透過上面的方法創建 filter ，來讓雙花括號({{}})或 v-bind 表達式中的值被代入該 filter 後，返回新的值。

被代入 filter 的參數

多個 filter

<p>message : {{ message | uppercase | filterName(1,5) }}</p>

<script>
Vue.filter('uppercase',value=>{
  return value.toUpperCase()
})
Vue.filter('filterName',(value,param1,param2)=>{
  return value.slice(param1,param2)
})
</script>

message 會先被代入 uppercase() 執行，得到 A 值，再將得到的 A 值代入 filterName() 裡去執行，最後得到並顯示 B 值。

代入多個引數

<p>sliceMsg : {{ sliceMsg | filterName(arg1,arg2) }}</p>

<script>
Vue.filter('filterName',(value,param1,param2)=>{
  return value.slice(param1,param2)
})
</script>

filterName 本身是個函數，所以可以有其他參數，但必須注意 sliceMsg 會作為 filterName 的第一個引數(value)，而 arg1 、 arg2 分別為 filterName 的第二個跟第三個引數來執行。

filter 感覺比較簡單，就到這結束了！

Demo：DAY21 | 跟 Vue.js 認識的30天 - Vue 過濾器(filter)

參考資料

Vue.js - 过滤器